<template>
	<view>
		<view class="content">
			<!-- <u-sticky style="position: fixed;top: 0;z-index: 100;"> -->
				<u-navbar :is-back="true" :title="title" title-color="#000" :border-bottom="false">
				</u-navbar>
			<!-- </u-sticky> -->
			<view class="main">
				<scroll-view class="mainNav" scroll-x="true" :scroll-left="scrollLeft" style="white-space: nowrap;">
					<view class="mainNavItem" @click="onMainNav(item,index)"
						:style="mainNavIndex == index ? 'border-bottom: 6rpx solid #1B9CFF;color: #1B9CFF' : ''"
						v-for="(item,index) in NavList" :key="index">
						{{item.name}}
					</view>
				</scroll-view>
				<view class="mainNav2">
					<view class="mainNav2_item">
					<!-- 	<span class="mainNav2_item_nr" @click="show = true">{{cityName}}</span>
						<view class="mainNav2_sjx" @click="show = true"></view>
						<view class="Vertical-line"></view> -->
						<span class="mainNav2_item_nr" @click="show1 = true">{{countyName}}</span>
						<view class="mainNav2_sjx" @click="show1 = true"></view>
					</view>

				</view>
				<view class="mainTable">
					<view class="mainTableNr">
						<view class="tableTh">
							<span class="tableData_topTitle" style="width: 100rpx;">地市</span>
							<span class="tableData_topTitle" style="width: 100rpx;">区县</span>
							<span class="tableData_topTitle" style="width: 220rpx;">上网账号</span>
							<span class="tableData_topTitle" style="width: 400rpx;">订单号</span>
							<span class="tableData_topTitle">宽带账号</span>
							<span class="tableData_topTitle">业务类型</span>
							<span class="tableData_topTitle">受理时间</span>
							<span class="tableData_topTitle">退单时间</span>
							<span class="tableData_topTitle">一级原因</span>
							<span class="tableData_topTitle">二级原因</span>
						</view>
						<view class="tableTd"
							:style="{height: isHig4 && dedicatedLineDataList.length > 3 ?  '450rpx' : '' }">
							<view v-if="dedicatedLineDataList.length>0" :class="getRowClass(index)"
								v-for="(item, index) in dedicatedLineDataList" :key="index">
								<span class="tableData_bomTitle1 ellipsis">{{ item.City }}</span>
								<span class="tableData_bomTitle1 ellipsis">{{ item.County || '-' }}</span>
								<span class="tableData_bomTitle2 ellipsis">{{ item.Onlineaccount }}</span>
								<span class="tableData_bomTitle3 ellipsis">{{ item.Code }}</span>
								<span class="tableData_bomTitle ellipsis">{{ item.Brodaccount }}</span>
								<span class="tableData_bomTitle ellipsis" @click="openTc(item.Businesstype)">
									{{ item.Businesstype }}
								</span>
								<span class="tableData_bomTitle ellipsis" @click="openTc(item.Acceptancetime)">
									{{ item.Acceptancetime }}
								</span>
								<span class="tableData_bomTitle ellipsis" @click="openTc(item.Refundtime)">
									{{ item.Refundtime }}
								</span>
								<span class="tableData_bomTitle ellipsis" @click="openTc(item.Reason1)">
									{{ item.Reason1 }}
								</span>
								<span class="tableData_bomTitle ellipsis"
									@click="openTc(item.Reason2)">{{ item.Reason2 }}</span>
							</view>
							<view class="tableTdNull" v-if="dedicatedLineDataList.length == 0">
								无
							</view>
						</view>
						<view class="gengduo" @click="onGD4()" v-if="isHig4 && dedicatedLineDataList.length > 3">
							展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm" :default-value="defaultlist"></u-select>
		<u-select v-model="show1" :list="list1" @confirm="confirm1" :default-value="defaultlist1"></u-select>
		<view>
			<u-popup v-model="tcText" mode="center" border-radius="12" closeable safe-area-inset-bottom
				close-icon-color="#000">
				<view class="popupBox">
					<!-- <view class="titleView">温馨提示</view> -->
					<view class="boxNr">
						<view class="nrTitle">
							{{pageText}}
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		watch: {
			// 监听路由变化
			'$route'(to, from) {
				if (to.path === '/pagesJK/indicator/components/details1') {
					this.mainNavIndex = this.$route.query.mainNavIndex
					this.cityName = this.$route.query.city
					this.countyName = this.$route.query.county || '全部'
					this.getmxcity()
					this.getmxcounty()
					this.getdataInfo()
				}
			}
		},
		data() {
			return {
				tcText: false,
				pageText: '',
				defaultlist: [0],
				defaultlist1: [0],
				title: '有线装维',
				cityName: '',
				countyName: '',
				NavList: [{
						name: '整体退单量'
					},
					{
						name: 'FTTR退单量'
					},
					{
						name: '商客宽带退单量'
					},
				],
				scrollLeft: 0,
				mainNavIndex: 0,
				dedicatedLineDataList: [],
				isHig4: false,
				show: false,
				show1: false,
				list: [],
				list1: [],
				mainNavName: ''
			}
		},
		mounted() {
			this.mainNavIndex = this.$route.query.mainNavIndex
			this.cityName = this.$route.query.city
			this.countyName = this.$route.query.county
			this.getmxcity()
			this.getmxcounty()
			this.getdataInfo()
		},
		methods: {
			// 获取市名
			async getmxcity() {
				let type = this.mainNavIndex + 1
				let parmes = `?&type=${type}`
				let data = await this.$api.getmxcity(parmes);
				if (data.Code == 200) {
					this.list = data.Data.map((item, index) => {
						return {
							value: index,
							label: item
						}
					})
					const index = this.list.findIndex(item => item.label === this.cityName);
					this.defaultlist[0] = index
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取县名
			async getmxcounty() {
				let type = this.mainNavIndex + 1
				let parmes = `?city=${this.cityName}&type=${type}`
				let data = await this.$api.getmxcounty(parmes);
				if (data.Code == 200) {
					this.list1 = data.Data.map((item, index) => {
						return {
							value: index,
							label: item
						}
					})
					const index = this.list1.findIndex(item => item.label === this.countyName);
					this.defaultlist1[0] = index
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 获取表格数据
			async getdataInfo() {
				if (this.cityName && this.countyName) {
					let type = this.mainNavIndex + 1
					let parmes = `?city=${this.cityName}&County=${this.countyName}&type=${type}`
					let data = await this.$api.getdataInfo(parmes);
					if (data.Code == 200) {
						this.dedicatedLineDataList = data.Data
					} else {
						uni.showToast({
							title: data.Message,
							icon: 'none',
							duration: 5000,
							mask: true,
						});
					}
				}
			},
			onMainNav(item, index) {
				this.mainNavIndex = index
				this.mainNavName = item.name
				this.getdataInfo()
			},
			// 选择市名
			async confirm(e) {
				this.cityName = e[0].label
				this.defaultlist = [this.list.map(item => item.label).indexOf(this.cityName)]
				await this.getmxcounty()
				if (this.list1.length > 0) {
					this.countyName = this.list1[0].label
				} else {
					this.countyName = ''
				}
				this.getdataInfo()
			},
			// 选择县名
			confirm1(e) {
				this.countyName = e[0].label
				this.defaultlist1 = [this.list1.map(item => item.label).indexOf(this.countyName)]
				this.getdataInfo()
			},
			getRowClass(index) {
				// 检查行号是否为奇数（长度为1、3、5等）
				if (index % 2 !== 0) {
					return 'odd-row tableTr';
				}
				return 'tableTr';
			},
			openTc(text) {
				this.pageText = text
				this.tcText = true
			},
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		overflow: hidden;
	}

	.main {
		width: 100%;
		min-height: calc(100vh - 88rpx);
		background: #F5F6F7;
		margin-top: 88rpx;
		display: block;
		overflow-x: auto;

		.mainNav {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 90rpx;
			background-color: #fff;
			border-top: 1px solid #F0F1F2;

			.mainNavItem {
				width: 33%;
				text-align: center;
				display: inline-block;
				line-height: 84rpx;
				font-size: 30rpx;

				color: #A7ABBB;
			}
		}

		.mainNav2 {
			width: 750rpx;
			height: 86rpx;
			background: #EEF4FC;
			border: 1rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 24rpx;

			.mainNav2_item {
				padding: 12rpx 34rpx;
				background: #FFFFFF;
				font-size: 26rpx;
				border-radius: 30rpx;
				border: 1rpx solid #F1F1F1;
				display: flex;
				align-items: center;
			}

			.mainNav2_sjx {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				/* 左边框透明 */
				border-right: 10rpx solid transparent;
				/* 右边框透明 */
				border-top: 18rpx solid #000;
				/* 上边框有颜色，形成三角形 */
				margin-left: 26rpx;
			}
		}

		.mainTable {
			overflow: auto;
			// width: 1580;
			background: #FFFFFF;

			.mainTable_topTitle {
				height: 98rpx;
				display: flex;
				align-items: center;

				.mainTable_topTitle_ble {
					margin-left: 34rpx;
					margin-right: 22rpx;
					width: 8rpx;
					height: 30rpx;
					background: #1B9CFF;
					border-radius: 4rpx;
				}

				.mainTable_topTitle_name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}
			}

			.mainTableNr {
				// width: 710upx;
				border-radius: 20upx 20upx 0 0;
				overflow: auto;
				position: relative;
				margin: 0 auto;
				background-color: #fff;

				.tableTh {
					height: 103rpx;
					background: #F2F5F8;
					box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108, 148, 182, 0.2);
					border: 1rpx solid #A4B8D3;
					border-radius: 20upx 20upx 0 0;
					display: flex;
					align-items: center;
					overflow: auto;
					position: absolute;
					top: 0;

					.tableData_topTitle {
						width: 200rpx;
						text-align: center;
						display: block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #2654B0;
					}
				}

				.tableTd {
					width: 2020rpx;
					padding: 100upx 0 0;
					height: calc(100vh - 300rpx);
					overflow: auto;

					.tableTr {
						width: 2020rpx;
						padding: 10upx 0;
						display: flex;
						align-items: center;
						border-radius: 8rpx;
					}

					.tableData_bomTitle {
						text-align: center;
						width: 200rpx !important;
						text-align: center;
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #5F6475;
						line-height: 24px;
						display: block;
						font-style: normal;
						text-transform: none;
						padding: 5upx 0;
					}

					.tableData_bomTitle1 {
						width: 100rpx !important;
						text-align: center;
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #5F6475;
						line-height: 24px;
						display: block;
						font-style: normal;
						text-transform: none;
						padding: 5upx 0;
					}

					.tableData_bomTitle2 {
						width: 220rpx !important;
						text-align: center;
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #5F6475;
						line-height: 24px;
						display: block;
						font-style: normal;
						text-transform: none;
						padding: 5upx 0;
					}

					.tableData_bomTitle3 {
						text-align: center;
						width: 400rpx !important;
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #5F6475;
						line-height: 24px;
						display: block;
						font-style: normal;
						text-transform: none;
						padding: 5upx 0;

					}
				}

				.gengduo {
					width: 709upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F1F6FF;
					position: absolute;
					bottom: 0;
					left: 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #2654B0;

					.icon_arrow_down {
						width: 24upx;
						height: 12upx;
						margin-left: 13upx;
					}
				}

				.tableTdNull {
					width: 100%;
					text-align: center;
					margin: 40rpx auto;
					font-size: 28rpx;
					color: #5F6475;
				}
			}

		}
	}

	.odd-row {
		background: #F1F6FF;
	}

	.Vertical-line {
		height: 44rpx;
		width: 2rpx;
		border-left: 2rpx #D5D5D5 solid;
		margin: 0 50rpx;
	}

	.popupBox {
		padding-top: 40rpx;
		padding-bottom: 40rpx;

		.boxNr {
			width: 500rpx;
			max-height: 600rpx;
			background: #F7F9FC;
			overflow-y: auto;
		}

		.nrTitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #000000;
			font-style: normal;
			text-transform: none;
			padding: 28upx 30upx;

		}
	}

	.ellipsis {
		height: 88rpx !important;
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		display: -webkit-box !important;
		/* 设置为弹性盒子 */
		-webkit-line-clamp: 2;
		/* 设置行数 */
		-webkit-box-orient: vertical;
	}
</style>